* {
    margin         : 0;
    padding        : 0;
    list-style     : none;
    text-decoration: none;
    word-wrap      : break-word
}

body {
    background: rgba(0, 0, 0, .4);
}

html,
body,
#app {
    width  : 100%;
    height : 100%;
    margin : 0;
    padding: 0;
}

#app {
    display        : flex;
    align-items    : center;
    justify-content: center;
    ;
}

.book {
    width   : 100%;
    height  : 100%;
    width   : 200px;
    height  : 400px;
    position: absolute;

    // overflow: hidden;
    >.page {
        width     : 100%;
        height    : 100%;
        background: #ffffff;
        position  : relative;

        >div {
            position  : absolute;
            // overflow  : hidden;
            >div {
                position  : absolute;
                background: #ffffff;
                // overflow  : hidden;
            }
        }
    }

    >.effect {
        pointer-events: none;
        width         : 100%;
        height        : 100%;
        position      : absolute;
        z-index       : 1;
        // overflow      : hidden;
        >.horn {
            // overflow  : hidden;
            position  : absolute;
            background: #fafafa; 
            >div {
                width           : 100%;
                height          : 100%;
                // background-image: -webkit-gradient(linear, 0% 0%, 2.07644% 23.2858%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));
            }
        }
    }
}